<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>侧栏</title>
     <!-- <link rel="stylesheet" href="../css/base.css">-->
     <style>
         * {
              margin: 0;
              padding: 0;
              box-sizing: border-box;
         }
         li {
              list-style: none;
         }
         /* 去除列表默认样式 */
         ul {
             list-style-type: none; /* 去除列表项前的项目符号 */
             padding: 0; /* 去除默认的内边距 */
             margin: 0; /* 去除默认的外边距 */
         }

         body {
             font: 14px/1.5 "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
         }
         a {
             /* color: #fff; */
             text-decoration: none;
         }
         .left {
             width: 209px;
             height: 1000px;
             background-color: rgba(39, 66,113, 100%);
             margin-top: 303px;
         }
         .left ul {
             padding: 25px 0;
         }
         .left ul li {
             width: 209px;
             height: 100px;
             color: #fff ;
             background-color: #062D6D;
             text-align: center;
             margin-bottom: 50px; /* 项之间的间距 */
             font-size: 25px; /* 字体大小 */
             overflow: hidden; /* 防止动画时文字溢出 */
             transition: transform 0.3s ease; /* 添加过渡效果 */
         }
         .left li a {
             display: block; /* 设置为行内块级元素  */
             line-height: 100px; /* 与li的高度相同，实现垂直居中 */
             color: inherit; /* 继承父元素的文字颜色 */
             /* 初始时文字不跳动 */
             animation: none;
         }
         .left li:hover {
             color: skyblue; /* 悬停时的文字颜色（这里保持白色，但可以根据需要更改）*/
             background-color: #0056b3;
         }
         .left li:hover a {
             animation: jump 1s infinite alternate; /* 持续时间1秒，无限循环，交替方向 */
         }
         .left ul li:active {
             transform: scale(0.95); /* 点击时缩小文字 */
             background-color: pink; /* 可选：改变背景色以增强视觉反馈 */
         }
         /* 定义跳动的动画 */
         @keyframes jump {
             0%, 100% { transform: translateY(0); }
             50% { transform: translateY(-5px); } /* 向下跳动5px */
         }
     </style>
</head>
<body>
<div class="left">
     <ul>
         <li><a href="#">C语言相关</a></li>
         <li><a href="#">Python相关</a></li>
         <li><a href="#">Web相关</a></li>
         <li><a href="#">Java相关</a></li>
         <li><a href="#">后端相关</a></li>
     </ul>
</div>

</body>
</html>